<template>
  <div>
    <el-button type="primary" @click="addProjectShow">添加项目</el-button>
    <el-table :data="projects" style="width: 100%" align="center" header-align="center">
      <el-table-column label="员工参与项目id" prop="projectId" />
      <el-table-column label="项目名称" prop="projectName" />
      <el-table-column label="项目开始日期" prop="projectStartTime" />
      <el-table-column label="项目结束日期" prop="projectEndTime" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="回车搜索" @keydown.enter="selece()"/>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[2, 5]" :small="small"
                   :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 修改的对话框 -->
    <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
      <el-form ref="ruleFormRef" :model="editProject" status-icon label-width="120px" class="demo-ruleForm">
        <el-form-item label="员工参与项目id" prop="pass">
          <el-input v-model="editProject.projectId" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目名称" prop="pass">
          <el-input v-model="editProject.projectName" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目开始日期" prop="pass">
          <el-input v-model="editProject.projectStartTime" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目结束日期" prop="pass">
          <el-input v-model="editProject.projectEndTime" type="text" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editProjectByID()">
                        提交
                    </el-button>
                </span>
      </template>
    </el-dialog>
    <!-- 修改结束对话框 -->



    <!-- 添加-->
    <el-dialog v-model="addDialogVisible" title="Warning" width="30%" center>
      <el-form ref="ruleFormRef" :model="addProject" status-icon label-width="120px" class="demo-ruleForm">
        <el-form-item label="员工参与项目id" prop="pass">
          <el-input v-model="addProject.projectId" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目名称" prop="pass">
          <el-input v-model="addProject.projectName" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目开始日期" prop="pass">
          <el-input v-model="addProject.projectStartTime" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目结束日期" prop="pass">
          <el-input v-model="addProject.projectEndTime" type="text" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addProjectByID">
                        提交
                    </el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'



//
let search = ref('')








//控制添加对话框的显示和隐藏
let addDialogVisible = ref(false)
let addProject = ref({})

//显示添加对话框的函数
let addProjectShow = function () {
  addDialogVisible.value = true;

}
//点击提交按钮，发请求
function addProjectByID() {
  addDialogVisible.value = false;
  console.log(addProject.value);
  axios.post('http://localhost:9090/test/project/add', addProject.value).then((res) => {
    if (res.data == 1) {
      selece();
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
    } else {
      selece();
      ElMessage.error('添加失败')
    }
  }).catch((err) => {
    console.log(err);
  })
}











let projects = ref([]);//接收后端返回emp数据的！
let total = ref(0);//接收后端返回emp数据的！
//分页数据
//当前页码
let currentPage4 = ref(1)
//每页数据条数
let pageSize4 = ref(5)
//分页组件的样式
let small = ref(false)
let background = ref(false)
let disabled = ref(false)
//控制修改对话框显示
let centerDialogVisible = ref(false)
//用来记录需要修改的一条数据
let editProject = ref({})

const handleSizeChange = function (val) {
  console.log(val)
  pageSize4.value = val;
  selece();
}
const handleCurrentChange = function (val) {
  selece();
  console.log(val)
  currentPage4.value = val;
}











//修改!
const handleEdit = function (index, row) {
  centerDialogVisible.value = true,
      console.log(index, row);
  editProject.value = row;
}

function editProjectByID() {
  centerDialogVisible.value = false,
      //访问修改操作
      console.log(editProject.value);
  axios.post('http://localhost:9090/test/project/update', editProject.value).then((res) => {
    if (res.data == 1) {
      selece();
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
    } else {
      selece();
      ElMessage.error('修改失败')
    }
  }).catch((err) => {
    console.log(err);
  })
}










selece();
function selece() {
  axios.get('http://localhost:9090/test/project/projects?pageNum=' + currentPage4.value + "&pageSize=" + pageSize4.value + '&projectName=' + search.value).then((res) => {
    console.log(res.data);
    projects.value = res.data.projectList;
    total.value = res.data.total;
  }).catch((err) => {
    console.log(err);
  })

}
let handleDelete = function (index, row) {
  console.log(row.empno);
  ElMessageBox.confirm(
      '请确认是否删除？',
      '删除功能',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        //  点确定
        //删除代码
        axios.get('http://localhost:9090/test/project/delete?projectId=' + row.projectId).then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            selece();
            //删除成功
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
          } else {
            selece();
            //删除失败
            ElMessage.error('删除失败')
          }
        }).catch((err) => {
          console.log(err);
        })
        //结束删除
      })
      .catch(() => {
        //  点取消
        ElMessage({
          message: '取消成功',
          type: 'warning',
        })
      })






}
</script>